<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="lookBtn(row.row.row)"
            >查看</el-button
          >
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑</el-button
          >
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(1, row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span
          :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn"
        >
          <svg-icon
            :class="state.addModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增
        </span>
        <span :class="'listInfoBtn'" @click="deleteBtn(0)">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist> 瓦斯抽放配置列表 </template>
    </list_controller>
    <!-- 新增弹窗 -->
    <!-- <teleport to="body"> -->
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="877"
        v-model="state.addModal"
        resize
        :mask="true"
        :before-hide-method="close"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="title">
                    <div class="colorarea"></div>
                    管道类型
                  </div>
                  <el-form-item label="瓦斯抽采点管道类型" prop="pipeType">
                    <el-select
                      v-model="state.formData.pipeType"
                      clearable
                      placeholder="请选择"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in state.pipeTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="title">
                    <div class="colorarea"></div>
                    抽采点配置
                  </div>
                  <el-form-item label="抽采点名称" prop="samplePointName">
                    <el-input
                      style="width: 200px"
                      clearable
                      v-model="state.formData.samplePointName"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <div class="title"></div>
                  <el-form-item label="抽采点位置" prop="samplePointLocation">
                    <el-select
                      v-model="state.formData.samplePointLocation"
                      clearable
                      placeholder="请选择"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in state.positations"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <div class="title"></div>
                  <el-form-item label="关联分站" prop="stationNumber">
                    <el-select
                      v-model="state.formData.stationNumber"
                      clearable
                      @change="changeStation"
                      placeholder="请选择"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in state.gasStation"
                        :key="item.value"
                        :label="item.stationCode"
                        :value="item.stationCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <div class="title"></div>
                  <el-form-item label="所属分组" prop="group">
                    <el-select
                      v-model="state.formData.group"
                      clearable
                      @change="changeGroup"
                      placeholder="请选择"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in state.groupList"
                        :key="item.value"
                        :label="item.groupNo"
                        :value="item.groupNo"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <div class="title">关联测点信息</div>
                  <el-form-item label="瓦斯分站号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[0].stationNumber"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <div class="title"></div>
                  <el-form-item label="瓦斯测点号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[0].pointId"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <div class="title"></div>
                  <el-form-item label="安装位置">
                    <el-input
                      style="width: 416px"
                      disabled
                      v-model="state.formData.pumpNodeList[0].place"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="负压分站号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[1].stationNumber"
                      placeholder="请输入"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="负压测点号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[1].pointId"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装位置">
                    <el-input
                      style="width: 416px"
                      disabled
                      v-model="state.formData.pumpNodeList[1].place"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="流量分站号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[2].stationNumber"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="流量测点号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[2].pointId"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装位置">
                    <el-input
                      style="width: 416px"
                      disabled
                      v-model="state.formData.pumpNodeList[2].place"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="温度分站号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[3].stationNumber"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="温度测点号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[3].pointId"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装位置">
                    <el-input
                      style="width: 416px"
                      disabled
                      v-model="state.formData.pumpNodeList[3].place"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="一氧分站号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[4].stationNumber"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="一氧测点号">
                    <el-input
                      style="width: 200px"
                      disabled
                      v-model="state.formData.pumpNodeList[4].pointId"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="安装位置">
                    <el-input
                      style="width: 416px"
                      disabled
                      v-model="state.formData.pumpNodeList[4].place"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="24" class="title">其他</el-col>
                <el-col :span="7">
                  <el-form-item
                    :prop="
                      state.formData.choicePoint
                        ? 'point'
                        : 'atmosphericPressure'
                    "
                  >
                    <template #label>
                      <div class="label">
                        <div>
                          安装位置大气压
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="标准大气压101.3254KPa"
                            placement="top"
                          >
                            <el-icon><QuestionFilled /></el-icon>
                          </el-tooltip>
                        </div>
                        <el-checkbox
                          style="height: 22px"
                          @change="changeChiocePoint"
                          v-model="state.formData.choicePoint"
                          label="选择测点"
                        />
                      </div>
                    </template>
                    <el-input
                      style="width: 200px"
                      oninput="value =value.replace(/[^\-\d.]/g, '').replace(/^\./g, '').replace(/\.{2,}/g,
    '.').replace(/(\.\d+)\./g, '$1') .replace(/(-)\./g, '$1').replace(/\-{2,}/g, '-')
    .replace(/(\d+|\.)-/g, '$1') .replace(/-(0){2,}/g,'$1').replace(/(-)0+(\d+)/g, '$1$2')
    .replace(/^0+(\d)/, '$1') .replace(/(\d{2000000})\d*/, '$1').replace(/(\.\d{600})\d*/, '$1')"
                      v-if="!state.formData.choicePoint"
                      clearable
                      v-model="state.formData.atmosphericPressure"
                      placeholder="请输入"
                    ></el-input
                    ><span v-if="!state.formData.choicePoint">KPa</span>
                    <el-select
                      v-if="state.formData.choicePoint"
                      v-model="state.formData.point"
                      clearable
                      @change="changeGroup"
                      placeholder="请选择"
                      style="width: 200px"
                    >
                      <el-option
                        v-for="item in state.paList"
                        :key="item.value"
                        :label="item.pointId"
                        :value="item.pointId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5"></el-col>
                <el-col :span="8">
                  <div class="title"></div>
                  <el-form-item prop="stationTypeName">
                    <template #label>
                      <div class="label">
                        <div>
                          液晶屏显示
                          <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="特殊定制分站才可使用"
                            placement="top"
                          >
                            <el-icon><QuestionFilled /></el-icon>
                          </el-tooltip>
                        </div>
                      </div>
                    </template>
                    <div class="item_box">
                      <el-select
                        v-model="state.formData.screenDisplay"
                        clearable
                        placeholder="请选择"
                        style="width: 200px"
                      >
                        <el-option
                          v-for="item in state.stationList"
                          :key="item.value"
                          :label="item.stationCode"
                          :value="item.stationCode"
                        />
                      </el-select>
                      <span>号分站</span>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="sumbitClick"> 确定 </el-button>
        </template>
      </vxe-modal>
    <!-- </teleport> -->
    <!-- 详情弹窗 -->
    <!-- <teleport to="body"> -->
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="877"
        v-model="state.open_detail"
        resize
        :mask="true"
        :before-hide-method="close"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <detailCom
              :modTitle="'基础信息'"
              :descList="state.descList1"
            ></detailCom>
            <div class="line_box"></div>
            <detailCom
              :modTitle="'关联测点'"
              :descList="state.descList2"
            ></detailCom>
            <div class="line_box"></div>
            <detailCom
              :modTitle="'其他信息'"
              :descList="state.descList3"
            ></detailCom>
          </div>
        </template>
        <template #footer>
          <div class="form_footer form_footer2">
            <el-button type="danger" plain @click="deleteBtn(1, state.formData)"
              >删除</el-button
            >
            <el-button type="primary" @click="editBtn(state.formData)">
              编辑
            </el-button>
          </div>
        </template>
      </vxe-modal>
    <!-- </teleport> -->
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, onMounted, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { ElMessage, ElMessageBox } from "element-plus";
import detailCom from "@/components/commonCom/detailCom";

const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
const upload = ref(null);

// 输入框数字和小数校验
const validateNumber = (rule, value, callback) => {
  const regex = /^[0-9]*\.?[0-9]*$/;
  if (value && !regex.test(value)) {
    callback(new Error("请输入有效的数字或小数"));
  } else {
    callback(new Error("安装位置大气压不能为空"));
  }
};

let state = reactive({
  options: {
    tableheads: computed(() => table_headers.gasPump),
    queryList: {
      dropdownUrl: "",
      querys: [],
      queryMap: new Map([]),
    },
    dataUrl: "/pump/list",
  },
  modalTitle: "新增瓦斯抽放配置",
  addModal: false,
  open_detail: false,
  formData: { pumpNodeList: [{}, {}, {}, {}, {}], choicePoint: false },
  rules: {
    pipeType: [
      {
        required: true,
        message: "请选择管道类型",
        trigger: "blur",
      },
    ],
    samplePointName: [
      {
        required: true,
        message: "请输入抽采点名称",
        trigger: "blur",
      },
    ],
    samplePointLocation: [
      {
        required: true,
        message: "请选择抽采点位置",
        trigger: "blur",
      },
    ],
    stationNumber: [
      {
        required: true,
        message: "请选择关联分站",
        trigger: "blur",
      },
    ],
    group: [
      {
        required: true,
        message: "请选择所属分组",
        trigger: "blur",
      },
    ],
    point: [
      {
        required: true,
        message: "请选择测点",
        trigger: "change",
      },
    ],
    atmosphericPressure: [
      {
        required: true,
        message: "请输入安装位置大气压",
        trigger: "blur",
      },
    ],
  },
  pipeTypes: [
    { label: "正压管道", value: "正压管道" },
    { label: "负压管道", value: "负压管道" },
  ],
  positations: [],
  gasStation: [],
  groupList: [],
  stationList: [],
  paList: [],
  descList1: [],
  descList2: [],
  descList3: [],
  detailId: { id: undefined },
});
// 获取抽采点位置
const getPostation = () => {
  axios.post("/place/info/addressInfo", {}).then((res) => {
    state.positations = [];
    res.data.list.forEach((item) => {
      state.positations.push({ label: item.placeName, value: item.placeName });
    });
  });
};
// 获取瓦斯抽放关联分站
const getGasStation = () => {
  axios.get("/pump/listGasStation").then((res) => {
    state.gasStation = res.data;
  });
};
// 获取所有分站列表
const getAllStation = () => {
  axios.post("/station/list", {}).then((res) => {
    state.stationList = res.data.list;
  });
};
// 获取安装位置大气压
const getPa = () => {
  axios
    .post("/gas/fire/listPointsBySensorName", {
      sensorName: "压力",
      primaryIndexId: 33,
      condition: "A%",
    })
    .then((res) => {
      state.paList = res.data;
    });
};
// 获取抽放记录详情
const getRowDetail = (obj) => {
  axios.post("/pump/getById", { id: obj.id }).then((res) => {
    state.detailId.id = res.data.id;
    state.formData = res.data;
    let arr = [{}, {}, {}, {}, {}];
    state.formData.pumpNodeList.forEach((item, index) => {
      arr[index] = item;
    });
    state.formData.pumpNodeList = arr;
    if (state.open_detail) {
      setData(state.formData);
    }
  });
};

// 打开新增弹窗
const addBtn = () => {
  state.addModal = true;
  state.modalTitle = "新增瓦斯抽放配置";
  state.formData.atmosphericPressure = 101.3254;
  getPa();
};
// 选择关联分站时执行
const changeStation = (val) => {
  state.formData.pumpNodeList = [{}, {}, {}, {}, {}];
  state.formData.group = "";
  state.gasStation.forEach((item) => {
    if (val == item.stationCode) {
      state.groupList = item.groupDtoList;
    }
  });
};
// 选择所属分组时执行
const changeGroup = (val) => {
  let obj = {};
  state.groupList.forEach((item) => {
    if (val == item.groupNo) {
      obj = item.pointMap;
    }
  });
  for (const key in obj) {
    console.log(obj[key]);
    if (obj[key].primaryIndexId == 4) {
      state.formData.pumpNodeList[0] = obj[key];
      state.formData.pumpNodeList[0].stationNumber = obj[key].stationCode;
      state.formData.pumpNodeList[0].place = obj[key].placeName;
    }
    if (obj[key].primaryIndexId == 6) {
      state.formData.pumpNodeList[1] = obj[key];
      state.formData.pumpNodeList[1].stationNumber = obj[key].stationCode;
      state.formData.pumpNodeList[1].place = obj[key].placeName;
    }
    if (obj[key].primaryIndexId == 10) {
      state.formData.pumpNodeList[2] = obj[key];
      state.formData.pumpNodeList[2].stationNumber = obj[key].stationCode;
      state.formData.pumpNodeList[2].place = obj[key].placeName;
    }
    if (obj[key].primaryIndexId == 3) {
      state.formData.pumpNodeList[3] = obj[key];
      state.formData.pumpNodeList[3].stationNumber = obj[key].stationCode;
      state.formData.pumpNodeList[3].place = obj[key].placeName;
    }
    if (obj[key].primaryIndexId == 1) {
      state.formData.pumpNodeList[4] = obj[key];
      state.formData.pumpNodeList[4].stationNumber = obj[key].stationCode;
      state.formData.pumpNodeList[4].place = obj[key].placeName;
    }
  }
};
// 选择测点多选框执行
const changeChiocePoint = (val) => {
  if (val) {
    state.formData.atmosphericPressure = "";
  } else {
    state.formData.point = "";
    state.formData.atmosphericPressure = "101.3254";
  }
};
// 关闭弹窗时执行
const close = () => {
  state.addModal = false;
  state.formData = { pumpNodeList: [{}, {}, {}, {}, {}], choicePoint: false };
};
// 提交
const sumbitClick = () => {
  if (!state.formData.choicePoint) {
    state.formData.point = "";
  } else {
    state.formData.atmosphericPressure = "";
  }
  let arr = [];
  state.formData.pumpNodeList.forEach((item) => {
    if (item.place) {
      arr.push(item);
    }
  });
  state.formData.pumpNodeList = arr;
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (state.modalTitle.includes("新增")) {
        axios.post("/pump/add", state.formData).then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
            close();
            proxy.$refs["zujianname"].getData();
          }
        });
      } else {
        axios.post("/pump/modify", state.formData).then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg);
            getRowDetail(state.detailId);
            close();
            proxy.$refs["zujianname"].getData();
          }
        });
      }
    }
  });
};
// 打开删除弹窗
const deleteBtn = (n, obj) => {
  if (n == 0) {
    let ids = [];
    if (store.records.length > 0) {
      ids = store.records.map((item) => {
        return item.id;
      });
    } else {
      ElMessage.warning("请先勾选所要删除数据!");
    }
    if (ids.length > 0) {
      ElMessageBox.confirm("是否确认删除?", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios.post("/pump/del", ids).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            proxy.$modal.msgSuccess(res.msg);
            store.records = [];
          }
        });
      });
    }
  } else {
    ElMessageBox.confirm("是否确认删除?", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      axios.post("/pump/del", [obj.id]).then((res) => {
        if (res.code == 200) {
          proxy.$refs["zujianname"].getData();
          proxy.$modal.msgSuccess(res.msg);
          store.records = [];
          state.open_detail = false;
        }
      });
    });
  }
};
// 打开编辑弹窗
const editBtn = (row) => {
  
  getRowDetail(row);
  state.addModal = true;
  state.modalTitle = "修改瓦斯抽放配置";
  getPa();
  
};
// 打开详情弹窗
const lookBtn = (row) => {
  state.open_detail = true;
  getRowDetail(row);
};
// 处理详情传入数据
const setData = (obj) => {
  state.descList1[0] = {
    name: "瓦斯抽采点管道类型",
    value: obj.pipeType,
    col: 8,
  };
  state.descList1[1] = {
    name: "抽采点名称",
    value: obj.samplePointName,
    col: 8,
  };
  state.descList1[2] = {
    name: "抽采点位置",
    value: obj.samplePointLocation,
    col: 8,
  };
  state.descList1[3] = {
    name: "关联分站",
    value: obj.stationNumber,
    col: 8,
  };
  state.descList1[4] = {
    name: "所属分组",
    value: obj.group,
    col: 8,
  };
  let arr = [];
  let arr2 = [{}, {}, {}, {}, {}];
  let strArr = ["瓦斯", "负压", "流量", "温度", "一氧"];
  obj.pumpNodeList.forEach((item, index) => {
    if (item.place) {
      arr2[index] = item;
    }
  });
  arr2.forEach((item, index) => {
    if (item.place) {
      arr.push(
        {
          name: strArr[index] + "分站号",
          value: item.stationNumber,
          col: 6,
        },
        {
          name: strArr[index] + "测点号",
          value: item.pointId,
          col: 6,
        },
        {
          name: "安装位置",
          value: item.place,
          col: 12,
        }
      );
    } else {
      arr.push(
        {
          name: strArr[index] + "分站号",
          value: "-",
          col: 6,
        },
        {
          name: strArr[index] + "测点号",
          value: "-",
          col: 6,
        },
        {
          name: "安装位置",
          value: "-",
          col: 12,
        }
      );
    }
  });
  state.descList2 = arr;
  state.descList3[0] = {
    name: "安装位置大气压",
    value:
      obj.atmosphericPressure == ""
        ? obj.point
        : obj.atmosphericPressure + "KPa",
    col: 8,
  };
  state.descList3[1] = {
    name: "液晶屏显示",
    value: obj.screenDisplay == "" ? "-" : obj.screenDisplay,
    col: 8,
  };
};

onMounted(() => {
  getPostation();
  getGasStation();
  getAllStation();
});
</script>
<style lang="scss" scoped>
.form_box {
  .title {
    height: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #3e464f;
    .colorarea {
      margin-right: 6px;
      width: 4px;
      height: 14px;
      background-color: #409eff;
    }
  }
  .label {
    height: 22px;
    display: flex;
    justify-content: space-between;
  }
  .item_box {
    height: 32px;
    display: flex;
    span {
      margin-left: 16px;
    }
  }
  .line_box {
    height: 16px;
  }
  .form_footer2 {
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
